<template>
  <div class="filpCard">
    <ul>
      <li v-for="(count, index) in arr" :key="index" ref="li">
        <div class="readCard" v-for="(item, index) in list" v-bind:key="index">
          <!-- 路由传值 -->
          <router-link
            :to="{
              name: 'mask',
              params: { author: item.author, desc: item.desc },
            }"
          >
            <div class="card_top clearfix">
              <div class="icon f_left">
                <div class="icon-img">
                  <img src="../assets/img/boji.jpg" alt="" />
                </div>
                <div class="con-title">
                  <span>{{ item.author }}</span>
                </div>
              </div>
              <div class="edit f_right">
                <i class="iconfont icon-fenxiang"></i>
              </div>
            </div>
            <div class="card_txt">
              <p>{{ item.desc }}</p>
            </div>
            <div class="card_sign">
              <div class="card_date">
                <div class="line"></div>
                <span class="f_left">12</span>
                <p>21</p>
              </div>
              <div class="card_text">
                <span class="text_t">宜开山见门</span>
                <span class="text_b">冬至之晨杀人记，林语堂</span>
              </div>
            </div>
            <div class="card_bottom">
              <div class="date_time f_left">
                <span>{{ item.up_date }}</span>
              </div>
              <div class="date_diu f_right">
                <div>
                  <i class="iconfont icon-liaotian"></i>
                </div>
                <div>
                  <i class="iconfont icon-kongaixin"></i>
                  <span>9</span>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </li>
      <li>
        <!-- 添加 -->
        <div class="finished" v-if="isShow">
          <!-- 圆形 -->
          <div class="f_circle">
            <div class="round"></div>
            <div class="circle"></div>
          </div>
          <div class="f_text">
            <span>今日卡片已读完</span>
            <span>距离卡片刷新还要</span>
            <span>{{ hour }}时{{ min }}分{{ send }}秒</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 删除与喜欢 -->
    <div class="card-tab" v-if="isflag">
      <div class="delete" v-on:click="deteFn">
        <i class="iconfont icon-shanchu"></i>
      </div>
      <div class="lovely" v-on:click="addFn">
        <i class="iconfont icon-kongaixin" v-if="showImg"></i>
        <i class="iconfont icon-aixin" v-if="!showImg"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      arr: [],
      num: 10,
      timer: null,
      isShow: false,
      isflag: true,
      hour: "00",
      min: "00",
      send: "00",
      showImg : true,
    };
  },
  methods: {
    //循环li标签
    addElement() {
      let lis = document.querySelectorAll(".filpCard ul li");
      // console.log(this.$refs.li);
      for (var i = 0; i < 10; i++) {
        this.arr.push(lis);
      }
    },
    deleTime() {
      //获取当前时间
      let fullTime = new Date();
      let year = fullTime.getFullYear();
      let month = fullTime.getMonth();
      let date = fullTime.getDate();
      let hours = fullTime.getHours();
      let endTime = new Date(year, month, date, 23, 59, 59);

      var newTime = new Date(); //得到最新的时间
      var ms = parseInt((endTime - newTime) / 1000); //得到毫秒
      var s = parseInt(ms % 60);
      var m = parseInt((ms / 60) % 60);
      var h = parseInt((ms / 3600) % 24);

      //补零操作
      s < 10 ? (s = "0" + s) : s;
      m < 10 ? (m = "0" + m) : m;
      h < 10 ? (h = "0" + h) : h;

      this.hour = h;
      this.min = m;
      this.send = s;
      //定时器
      this.timer = setInterval(() => {
        this.send--;
        if (this.send < 0) {
          this.send = 60;
          this.send--;
          clearInterval(this.timer);
          return;
        }
      }, 1000);
    },
    deteFn() {
      //向右切换
      this.$nextTick(() => {
        let lis = this.$refs["li"];
        --this.num;
        lis[this.num].style.transform = "translateX(-350px)";
        lis[this.num].style.transition = "all .6s ease";
        if (this.num < 1) {
          this.num = 0;
          lis[this.num].style.transform = "translateX(-350px)";
          lis[this.num].style.transition = "all .6s ease";
          //显示倒计时
          this.isShow = true;
          //隐藏图标
          this.isflag = false;
          return;
        }
        // console.log(this.num);s
      });
    },
    addFn() {
      this.showImg =! this.showImg;
      // console.log(this.showImg);
      //进行本地存储
      if(this.showImg == false){
        localStorage.setItem('ex-data',JSON.stringify(this.list));
      }else if(this.showImg == true){
        localStorage.removeItem('ex-data');
      }
    },
  },
  created() {
    // 获取接口数据
    let url = `https://v2.alapi.cn/api/mryw/random?token=ZpuG4IJuCdGYDXC1`;
    let promise = axios.get(url);
    // console.log(this.list);

    promise.then(
      (res) => {
        let data = res.data.data;
        this.list.push(data);
        // console.log(this.list);
        // console.log(res);
      },
      (err) => {
        console.log(res);
      }
    );
  },
  mounted() {
    this.addElement();
    this.deleTime();
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/reset.css";

.filpCard {
  height: 600px;
  ul {
    height: 20px;
    position: relative;
    li {
      position: absolute;
      top: 45%;
      left: 18%;
      padding-top: 80px;
      transform-origin: center bottom;
      .readCard {
        width: 260px;
        height: 380px;
        margin: 0 auto;
        border-radius: 10px;
        background: #fff;
        &::after {
          content: "";
          display: block;
          position: absolute;
          width: 240px;
          height: 24px;
          border-radius: 8px;
          margin-left: 10px;
          background: rgba(255, 255, 255, 0.1);
        }
        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 220px;
          height: 30px;
          border-radius: 8px;
          margin-left: 20px;
          margin-top: 375px;
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
  .card-tab {
    width: 260px;
    height: 50px;
    margin: 50px auto 0px;
    margin-top: 500px;
    div {
      width: 50%;
      height: 50px;
      text-align: center;
      margin-left: 50px;
      display: inline-block;
    }
    .delete {
      width: 50px;
      line-height: 50px;
      border-radius: 50%;
      background: #fff;
      i {
        font-size: 30px;
        color: #a7b0ba;
      }
    }
    .lovely {
      width: 50px;
      line-height: 50px;
      border-radius: 50%;
      background: #fff;
      color: #a7b0ba;
      i {
        font-size: 30px;
      }
      .icon-aixin{
        color: #f00;
      }
    }
  }
  .nextCard {
    position: absolute;
    margin-top: -9.9rem;
    margin-left: 1.5rem;
    width: 260px;
    height: 380px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
  }
  .readCard {
    // 头部
    .card_top {
      height: 60px;
      div {
        display: inline-block;
        overflow: hidden;
      }
      .icon {
        width: 150px;
        height: 60px;
        padding-left: 10px;
        position: relative;
        div {
          width: 40px;
          height: 40px;
          position: absolute;
        }
        .icon-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-top: 5px;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .con-title {
          width: 50px;
          height: 40px;
          font-size: 16px;
          margin-left: 50px;
          margin-top: 15px;
          font-weight: bold;
        }
      }
      .edit {
        width: 40px;
        height: 50px;
        line-height: 50px;
        i {
          font-size: 22px;
          color: #a7b0ba;
        }
      }
    }
  }
  // 内容
  .card_txt {
    width: 240px;
    height: 180px;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    color: #8f8f8f;
    font-size: 18px;
  }
  .card_sign {
    width: 230px;
    height: 60px;
    margin-left: 15px;
    margin-top: 15px;
    border: 1px solid #cad3c8;
    border-radius: 5px;
    position: relative;
    .card_date {
      width: 60px;
      height: 60px;
      position: absolute;
      color: #a7b0ba;
      border-right: 1px solid #cad3c8;
      .line {
        width: 1px;
        height: 50px;
        position: absolute;
        background: #a7b0ba;
        transform: rotate(45deg);
        margin-left: 30px;
        margin-top: 5px;
      }
      span {
        width: 25px;
        height: 28px;
        display: block;
        font-size: 20px;
        padding-left: 8px;
      }
      p {
        padding-top: 5px;
        padding-left: 15px;
        font-size: 20px;
      }
    }
    .card_text {
      height: 60px;
      width: 155px;
      position: absolute;
      padding-top: 5px;
      padding-left: 10px;
      margin-left: 60px;
      line-height: 25px;
      span {
        display: block;
      }
      .text_t {
        color: #8f8f8f;
        font-weight: bold;
        font-size: 18px;
      }
      .text_b {
        color: #a7b0ba;
        font-size: 12px;
      }
    }
  }
  .card_bottom {
    height: 30px;
    line-height: 30px;
    margin-top: 25px;
    .date_time {
      color: #a7b0ba;
      font-size: 16px;
      padding-left: 15px;
    }
    .date_diu {
      color: #a7b0ba;
      padding-right: 15px;
      div {
        width: 20px;
        height: 30px;
        margin-left: 20px;
        margin-right: 5px;
        display: inline-block;
        letter-spacing: 2px;
        i {
          &:first-child {
            font-size: 20px;
          }
          &:last-child {
            font-size: 22px;
          }
        }
        span {
          font-size: 16px;
        }
      }
    }
  }
  .finished {
    width: 260px;
    height: 380px;
    .f_circle {
      height: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: moves 10s linear infinite;

      .round {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 2px solid #ccc;
      }
      .circle {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin-left: -9px;
        background-color: #fff;
      }
    }
    .f_text {
      text-align: center;
      span {
        display: block;
        &:nth-of-type(1) {
          font-size: 20px;
          padding-bottom: 10px;
          color: #858891;
        }
        &:nth-of-type(2) {
          font-size: 14px;
          padding-bottom: 5px;
          color: #fff;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #c6c8d7;
        }
      }
    }
  }
}
@keyframes moves {
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}
</style>